<template>
  <div>
    <Box>
      <h2 style="margin: 10px 15px" slot="title">上报基本信息</h2>
      <div slot="box">
        <div>
          <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="案(事)件名称" prop="name">
              <a-input v-model="form.name" placeholder="请输入案(事)件名称" />
            </a-form-model-item>
            <a-form-model-item label="发生日期" required prop="occurrenceDate">
              <a-date-picker v-model="form.occurrenceDate" valueFormat="YYYY-MM-DD" />
            </a-form-model-item>
            <a-form-model-item label="发生地" prop="occurrencePlace">
              <a-select v-model="form.occurrencePlace" placeholder="请选择发生地">
                <a-select-option v-for="(item, index) in diqu" :value="item.name" :key="index">
                  {{ item.fullName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="发生地详址" prop="detailedAddress">
              <a-select v-model="form.detailedAddress" :show-search="true" :allowClear="false"
                :default-active-first-option="false" :show-arrow="false" :filter-option="false" :not-found-content="null"
                style="width: 100%" placeholder="请输入" @search="onSearch" @change="onChange">
                <a-select-option v-for="(item, index) in positionList" :key="index" :value="item">{{ item.address
                }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="经纬度" prop="longitude">
              <a-input v-model="form.longitude" placeholder="经度" style="width: 45%;margin-right: 10%" />
              <a-input v-model="form.latitude" placeholder="纬度" style="width: 45%" />
            </a-form-model-item>
            <a-form-model-item label="案(事)件性质" prop="nature">
              <a-select v-model="form.nature" placeholder="请选择案(事)件性质">
                <a-select-option v-for="(item, index) in natureArr" :value="item.value" :key="index">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="案(事)件情况" prop="caseSituation">
              <a-input v-model="form.caseSituation" type="textarea" placeholder="至少输入五个字符" />
            </a-form-model-item>
            <a-form-model-item label="主犯(嫌疑人)姓名" prop="principalOffenderName">
              <a-input v-model="form.principalOffenderName" placeholder="请输入 主犯(嫌疑人)姓名" />
            </a-form-model-item>
            <a-form-model-item label="主犯(嫌疑人)证件代码" prop="documentType">
              <a-select v-model="form.documentType" placeholder="请选择主犯(嫌疑人)证件代码">
                <a-select-option v-for="(item, index) in documentTypeArr" :value="item.value" :key="index">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="主犯(嫌疑人)证件号码" prop="identificationNumber">
              <a-input v-model="form.identificationNumber" placeholder="请输入主犯(嫌疑人)证件号码" />
            </a-form-model-item>
            <div class="Filst">
              <a-form-model-item label="作案人数" prop="perpetratorsNumber">
                <a-input-number id="inputNumber" v-model="form.perpetratorsNumber" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="在逃人数" prop="fugitivesNumber">
                <a-input-number id="inputNumber" v-model="form.fugitivesNumber" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="抓捕人数" prop="arrestsNumber">
                <a-input-number id="inputNumber" v-model="form.arrestsNumber" placeholder="请输入" />
              </a-form-model-item>
            </div>
            <a-form-model-item label=" 案件侦破情况" prop="caseSituation">
              <a-input v-model="situation[0].situation" type="textarea" placeholder="至少输入五个字符" />
            </a-form-model-item>
            <a-form-model-item label="是否破案" prop="defuseSuccess">
              <a-switch default-checked @change="onChange5" v-model="situation[0].solveCase">
                <a-icon slot="checkedChildren" type="check" />
                <a-icon slot="unCheckedChildren" type="close" />
              </a-switch>
            </a-form-model-item>

            <a-form-model-item label="上传附件">
              <j-upload v-model="fileListStr" />
              <div style="color: #b1b1b1"> 支持扩展名：.rar .zip .doc .docx .pdf .jpg... </div>
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" style="display: flex">
              <a-button type="primary" @click="onSubmit">
                提交
              </a-button>
              <a-button style="margin-left: 10px;" @click="resetForm">
                取消
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
    </Box>
    <Map ref="mapDrawId" @pisitionList="onPisitionList" />
  </div>
</template>

<script>
import Box from '@/views/xlgc/Box/index'
import { getDictItemsFromCache } from '@api/api'
import { getfrom, getTexiang, upDataSSave, updateLine, updateSafety } from '@api/xlgc/lawCase'
import Input from '@/views/xlgc/lawCase/LifeCase/detailed/ImportModal'
import Map from '@/views/xlgc/modules/map'

export default {
  name: 'basic',
  components: { Input, Box, Map },
  props: {
    basics: Number
  },
  data() {
    return {
      c: 0,
      diqu: [],
      visible: false,
      fileList: [],
      fileLists: [],
      fileListStr: undefined,
      labelCol: { span: 3 },
      wrapperCol: { span: 6 },
      other: '',
      form: {
        name: undefined,
        occurrenceDate: "",
        occurrencePlace: undefined,
        detailedAddressOccurrence: undefined,
        latitude: ``,
        longitude: ``,
        nature: undefined,
        caseSituation: "",
        principalOffenderName: "",
        documentType: undefined,
        identificationNumber: "",
        perpetratorsNumber: undefined,
        fugitivesNumber: undefined,
        arrestsNumber: undefined,
      },
      situation: [
        {
          situation: '',
          solveCase: 0
        }
      ],
      updatas: {},
      positionList: [],
      natureArr: this.filterMultiDictText('cases_nature', ''),
      documentTypeArr: this.filterMultiDictText('document_type', ''),
      rules: {
        arrestsNumber: [{ required: true, message: '请输入', trigger: 'blur' }],
        caseSituation: [{ required: true, message: '请输入案(事)件情况', trigger: 'blur' },
        { required: true, min: 5, message: '请输入至少五个字符', trigger: 'blur' }
        ],
        detailedAddressOccurrence: [{ required: true, message: '请输入发生地详址', trigger: 'blur' }],
        documentType: [{ required: true, message: '请选择证件类型', trigger: 'blur' }],
        fugitivesNumber: [{ required: true, message: '请输入', trigger: 'blur' }],
        identificationNumber: [
          { required: true, message: '请输入证件号码', trigger: 'blur' },
          { pattern: /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|30|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/, message: '请输入正确的身份证号码', }
        ],
        longitude: [{ required: true, message: '请输入经纬度', trigger: 'blur' }],
        mainTypes: [{ required: true, message: '请选择证件代码', trigger: 'blur' }],
        name: [{ required: true, message: '请输入案事件名称', trigger: 'blur' }],
        nature: [{ required: true, message: '请选择案事件性质', trigger: 'blur' }],
        occurrenceDate: [{ required: true, message: '请选择发生日期', trigger: 'blur' }],
        occurrencePlace: [{ required: true, message: '请输入发生地点', trigger: 'blur' }],
        perpetratorsNumber: [{ required: true, message: '请输入', trigger: 'blur' }],
        principalOffenderName: [{ required: true, message: '请输入主犯姓名', trigger: 'blur' }],
        eventOverview: [
          { required: true, min: 5, message: '请输入至少五个字符', trigger: 'blur' }
        ],
      },
      dateFormat: 'YYYY-MM-DD',
      pass: false,
      niTitle: [],
      bal: false,
      identification: false
    };
  },
  mounted() {
    getfrom()
      .then(res => {
        console.log(res)
        this.diqu = res.result
      })
      .catch(e => {
        this.$message.warn('请求失败！')
      })
    if (this.$route.query.id) {
      this.identification = true
      // alert(6)
      this.institutionT(this.$route.query.id)
    }
  },
  methods: {
    // nameTitle(val){
    //   this.niTitle = val
    // },
    institutionT(val) {
      getTexiang(val)
        .then(response => {
          console.log(response)
          this.form = response.result.safety
          // this.nodeVOS = response.result.nodeVOS
          // this.party = response.result.events
          this.situation = response.result.situation
        })
        .catch(error => {
          reject(error)
        })

    },
    onSearch(val) {
      if (val == '') {
        return
      }
      this.$refs.mapDrawId.getPositionList(val)
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        console.log(valid)
        // this.passCheck = valid
        this.pass = valid
      });
    },
    onSubmit() {
      this.submitForm()
      if (this.pass) {
        // this.form.arrestsNumber = Number(this.form.arrestsNumber)
        // this.form.fugitivesNumber = Number(this.form.fugitivesNumber)
        // this.form.peopleInvolvedNumber = Number(this.form.peopleInvolvedNumber)
        // let fileLists = this.fileListStr.split(',')
        let fileLists = []
        this.fileListStr === undefined ? fileLists = [] : fileLists.push(this.fileListStr)
        this.updatas = Object.assign({}, this.updatas, { safety: this.form }, { situation: this.situation }, { fileList: fileLists })
        if (!this.identification) {
          // console.log(this.updatas)
          this.refreshTable(this.updatas)
        } else {
          updateSafety(this.updatas).then(src => {
            console.log(src)
            if (src.success) {
              this.$message.success('修改成功', 2)
              this.$router.push({
                path: '/mine/list'
              })
            } else {
              this.$message.error('修改失败，请仔细核对后再次添加')
            }
          }).catch(err => {
            console.log(err)
          })
        }

      } else {
        this.$message.error('您此页的数据还没有填写完整,无法提交');
      }

    },
    onChange5(checked) {
      checked ? this.situation[0].solveCase = 1 : this.situation[0].solveCase = 0
    },
    onChange(val) {
      if (val != undefined) { }
      console.log(val)
      this.form.detailedAddressOccurrence = val.address
      this.form.latitude = val.latitude
      this.form.longitude = val.longitude
    },
    onPisitionList(arr) {
      this.positionList = arr
    },
    refreshTable(val) {
      upDataSSave(val)
        .then(res => {
          console.log(res)
          if (res.success) {
            this.$message.success('上报成功', 2,);
            this.$router.push({ path: '/mine/list' })
          } else {
            this.$message.error('添加失败，请仔细核对后再次添加');
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },

    // inputse(val){
    //   let arr = []
    //   arr.push(val)
    //   this.fileLists = arr
    //   console.log(this.fileLists)
    // },
    // showModal(val) {
    //   this.visible = true;
    // },
    handleOk() {
      this.$refs.inpute.handleOk()
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    // filterMultiDictText(dictCode, text) {
    //   console.log(dictCode,text)
    //   if (!text && text !== 0) return
    //   let datas = getDictItemsFromCache(dictCode)
    //   // return this.$filterMultiDictText(datas, text)
    //   return this.$filterDictText(datas, text)
    // },
    filterMultiDictText(dictCode, text) {
      // console.log(dictCode,text)
      // if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // console.log(this.$filterDictText(datas, text))
      // return this.$filterMultiDictText(datas, text)
      // return this.$filterDictText(datas, text)
      // console.log(datas)
      return datas
    }

  },
  watch: {
    niTitle: {
      deep: true,
      handler(a, b) {
        this.niTitle = a
      }
    }
    // fileLists:{
    //   deep:true,
    //   handler(a,b){
    //     // console.log(this.form)
    //     this.updatas = Object.assign({},this.updatas,{fileList:this.fileLists})
    //   }
    // },
    // updatas:{
    //   deep:true,
    //   handler(a,b){
    //     this.resetForm()
    //   }
    // }
  }
}
</script>

<style scoped lang="less">
.Filst {
  display: flex;

  /deep/.ant-row {
    width: 14%;
  }

  /deep/.ant-col-3 {
    width: 66%;
  }
}

:deep(.Filst .ant-form-item-label) {
  width: 100%;
}

:deep(.Filst .ant-form-item-label) {
  width: 100%;
}

:deep(.Filst .ant-form-item) {
  display: flex;
  margin-right: 20px;
}
</style>